let root = document.getElementById("root");
let chart = echarts.init(root);

let all = 666,
  normal = 400,
  locked = 200,
  loginOff = 66;

var option = {
  title: {
    text: "总用户数",
    x: "center"
  },
  tooltip: {
    trigger: "item",
    formatter: "{a} <br/>{b} : {c} ({d}%)"
  },
  legend: {
    orient: "vertical",
    left: "left",
    data: ["正常状态用户数", "已锁定用户数", "已注销用户数"]
  },
  series: [
    {
      name: "用户统计",
      type: "pie",
      radius: "55%",
      center: ["50%", "60%"],
      startAngle: 0,
      data: [
        {
          value: normal,
          name: "正常状态用户数",
          itemStyle: {
            normal: {
              color: "#2e83dd"
            }
          }
        },
        {
          value: locked,
          name: "已锁定用户数",
          itemStyle: {
            normal: {
              color: "#a4d4ff"
            }
          }
        },
        {
          value: loginOff,
          name: "已注销用户数",
          itemStyle: {
            normal: {
              color: "#e9e9e9"
            }
          }
        }
      ],
      itemStyle: {
        emphasis: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)"
        }
      },
      label: {
        normal: {
          position: "outside",
          textStyle: {
            color: "#40444d",
            fontSize: 14
          }
        },
        emphasis: {
          textStyle: {
            color: "#40444d",
            fontSize: 14,
            opacity: 0.7
          }
        }
      },
      labelLine: {
        normal: {
          lineStyle: {
            color: "#40444d"
          }
        },
        emphasis: {}
      }
    }
  ]
};
chart.setOption(option);
